<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物联设备信息管理主页面</title>
    <!-- 引入 jQuery -->
    <script th:src="@{/jquery-3.7.1.js}" src="../static/jquery-3.7.1.js"></script>
    <style>
        a {
            text-decoration: none;
            text-align: center;
        }
        #Add {
            top: 70px;
            left: 690px;
            position: fixed;
            padding: 10px 15px;
            background-color: #00c5ff;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-size: 18px; /* 调整消息字体大小 */
            margin-bottom: 20px; /* 增加与下面元素的距离 */
        }
        table {
            width: 1200px; /* 设置表格的宽度 */
            border-collapse: collapse;
            margin-top: 60px;

        }
        th, td {
            padding: 15px; /* 增加单元格内边距 */
        }
        h1 {
            font-size: 32px; /* 调整标题字体大小 */
            margin-bottom: 30px; /* 增加与下面元素的距离 */
        }

    </style>
</head>
<body>
    <h1 align="center">物联设备信息管理</h1>
    <p th:text="${msg}" align="center"></p>
    <div id="Add">
        <a th:href="@{/add}">添加</a>
    </div>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
        <tr bgcolor="#a9a9a9">
            <th>设备ID</th>
            <th>设备名称</th>
            <th>设备制作商</th>
            <th>型号</th>
            <th>安装日期</th>
            <th>最后维护日期</th>
            <th>设备位置</th>
            <th>设备IP地址</th>
            <th>设备状态</th>
            <th>操作</th>
        </tr>
        <tr th:each="device:${iotDevices}">
            <td th:text="${device.getDeviceId()}"></td>
            <td th:text="${device.getDeviceName()}"></td>
            <td th:text="${device.getManufacturer()}"></td>
            <td th:text="${device.getModel()}"></td>
            <td th:text="${#dates.format(device.getInstallationDate(),'yyyy-MM-dd')}"></td>
            <td th:text="${#dates.format(device.getLastMaintenanceDate(),'yyyy-MM-dd')}"></td>
            <td th:text="${device.getLocation()}"></td>
            <td th:text="${device.ip}"></td>
            <td th:switch="${device.getStatus()}">
                <span th:case="0" style="color: darkgray ; font-weight: bold">离线</span>
                <span th:case="1" style="color: green ; font-weight: bold">在线</span>
                <span th:case="2" style="color: red ; font-weight: bold">维护中</span>
            </td>
            <td><a th:href="@{/update(id=${device.getDeviceId()})}">修改</a>
<!--                <a th:href="@{/delete(id=${device.getDeviceId()})}">删除</a>-->

                <a th:href="|del(${device.getDeviceId()}|">删除</a>

            </td>
        </tr>
    </table>


    <script>
        $("tr:odd").css("background-color", "lightpink");
        $("tr:even").css("background-color", "lightskyblue");
        $("tr:first").css("background-color", "lightslategray");


        /**
         * ajax 删除
         */
        // function del(deviceId){
        //     if (confirm("确定删除吗？")){
        //         window.location.href="/del?"+ deviceId ;
        //     }
        // }
        window.onload = function() {
            function del(deviceId) {
                if (confirm("确定删除吗？")) {
                    // 删除操作逻辑
                    $.ajax({
                        url: "/del",
                        type: "post",
                        data: { deviceId: deviceId },
                        success: function(response) {
                            // 删除成功后的处理，例如显示成功消息或更新页面显示
                            alert("删除成功！");
                        },
                        error: function(error) {
                            // 删除失败后的处理
                            alert("删除失败：" + error.responseText);
                        }
                    });
                }
            }
        };


    </script>



</body>
</html>